<template>
  <el-menu class="side" unique-opened :default-active="side_mark">
    <template v-for="(menu, index) in side_menus">

      <el-menu-item
        v-if="!menu.children"
        :key="index"
        :index="String(index)"
        @click="goPage(menu.url, index)"
      >
        <i class="ucai-icon" :class="'ucai-icon-' + menu.icon"></i>
        <span>{{menu.name}}</span>
      </el-menu-item>

      <el-submenu :index="String(index)" :key="index" v-else>
        <template slot="title">
          <i class="ucai-icon" :class="'ucai-icon-' + menu.icon"></i>
          <span>{{menu.name}}</span>
        </template>
        <el-menu-item
          v-for="(sub, sub_index) in menu.children"
          :key="sub_index"
          :index="String(index) + '-' + String(sub_index)"
          @click="goPage(sub.url, index, sub_index)"
        >{{sub.name}}</el-menu-item>
      </el-submenu>

    </template>

  </el-menu>
</template>

<script>
  import {
    getSideMenus
  } from '@api/modules_pc/base'
  import {
    setSessionSideMenus,
    getSessionSideMenus,
  } from '@utils/storage_base_config'
  import {
    HOME_PATH_NAME,
    getPagePath,
    getPageName
  } from '@router/path'
  import {
    Menu,
    Submenu,
    MenuItemGroup,
    MenuItem
  } from 'element-ui'
  export default {
    name: 'side',
    components: {
      [Menu.name]: Menu,
      [Submenu.name]: Submenu,
      [MenuItemGroup.name]: MenuItemGroup,
      [MenuItem.name]: MenuItem
    },
    data() {
      return {
        side_mark: '1',
        /** 
         * 数据格式：
         * [{
         *   name: '一级菜单名',
         *   icon: 'XXX', // 图标。ucai-icon ucai-icon-XXX
         *   // url: '',
         *   children: [{
         *     name: '二级菜单名',
         *     url: 'pc/XXX', // pathName
         *   }]
         * }]
        */
        side_menus: [],
      }
    },
    created() {
      const session_side = getSessionSideMenus(),
            session_menus = session_side.menus,
            session_mark = session_side.mark
        if(session_mark)this.side_mark = session_mark
      if (session_menus) {
        this.side_menus = session_menus
      } else {
        this.getMenus()
      }
    },
    watch: {
      side_mark() {
        setSessionSideMenus(this.side_mark)
      },
      side_menus(nw) {
        if (nw && nw.length) {
          this.setChecked()
          setSessionSideMenus(this.side_mark, nw)
        }
      }
    },
    methods: {
      async getMenus() {
        getSideMenus()
          .then(res => {
            this.side_menus = res.data
          })
      },
      goPage(pathname, index, sub_index) {
        if (sub_index >= 0) {
          index = index + '-' + sub_index
        }
        this.side_mark = index
        this.$goPage(pathname)
      },
      setChecked() {
        let mount_path = localStorage.MOUNT_PATH,
          path_name = HOME_PATH_NAME,
          mark = null
        if (!mount_path) this.goPage(path_name, 0)
        path_name = getPageName()
        this.findMark(this.side_menus, path_name)
      },
      findMark(array, name, parent_index) {
        array.map((item, index) => {
          if (item.url === name) {
            this.side_mark = (parent_index ? (parent_index + '-') : '') + String(index)
          } else if (item.children && item.children.length) {
            this.findMark(item.children, name, index)
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "~@style_pc/basic/utils/index";

  .side {
    position: fixed;
    top: 50px;
    left: 0;
    height: 100%;
    width: 200px;
    z-index: 101;
    background-color: @side-bg;
    overflow: hidden;

    .ucai-icon {
      font-size: 14px;
      margin-right: 10px;
      vertical-align: middle;
    }

    /deep/.el-submenu__title {
      color: #d9d9d9;
      height: 45px;
      line-height: 45px;
      font-size: 14px;
      &:hover {
        background-color: #324b61;
      }
    }

    /deep/ .el-menu {
      background-color: #2c2e30;
      .el-menu-item {
        text-indent: 6px;
      }
    }

    /deep/ .el-menu-item {
      font-size: 14px;
      color: #d9d9d9;
      height: 40px;
      line-height: 40px;
      &:hover,
      &:focus,
      &.is-active {
        background-color: #324b61;
      }
    }

    /deep/ .el-menu-item-group__title {
      display: none;
    }

    /deep/ .el-submenu{
      &> .el-submenu__title .el-submenu__icon-arrow {
        &::before {
          content: "\e6d9";
        }
      }
      &.is-opened > .el-submenu__title .el-submenu__icon-arrow {
        &::before {
          content: "\e6d8";
        }
      }
    } 

  }
</style>
